<template>
<div id = mydiv><!--        搜索表单-->
    <el-form :inline="true" :model="SearchForm" class="demo-form-inline" style="height: 50px">
        <el-form-item >
            <el-input v-model="SearchForm.bname" placeholder="商家名"></el-input>
        </el-form-item>
        <el-form-item >
            <el-input v-model="SearchForm.sname" placeholder="店铺名"></el-input>
        </el-form-item>
        <el-form-item >
            <el-input v-model="SearchForm.address" placeholder="店铺地址"></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="SearchForm.auditstatr" placeholder="请选择审核状态">
                <el-option label="已审核" value=1></el-option>
                <el-option label="未审核" value=0></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-date-picker
                    v-model="SearchForm.beginTime"
                    type="date"
                    placeholder="选择创建日期">
            </el-date-picker>
            ——
            <el-date-picker
                    v-model="SearchForm.endTime"
                    type="date"
                    placeholder="选择结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable()">查询</el-button>
        </el-form-item>
    </el-form>

    <!--        表格回显-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="商家编号">
        </el-table-column>
        <el-table-column
                prop="bname"
                label="商家名">
        </el-table-column>
        <el-table-column
                prop="telephone"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="店铺名称">
        </el-table-column>
        <el-table-column
                prop="address"
                label="店铺地址">
        </el-table-column>
        <el-table-column
                prop="typename"
                label="商品类型">
        </el-table-column>
        <el-table-column
                prop="payaccount"
                label="支付宝账号">
        </el-table-column>
        <el-table-column
                prop="applicationdate"
                label="申请日期">
        </el-table-column>
        <el-table-column
                prop="audtstate"
                label="审核状态">
            <template slot-scope="scope">
                <el-button :type="scope.row.audtstate==1?'success':'warning'" plain>{{scope.row.audtstate==0?"未审核":"已审核" }}</el-button>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="操作"
                width="500px">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-share" @click="detailedMsg(scope.row.id)">详细信息</el-button>
                <el-button type="primary" icon="el-icon-share" @click="succes(scope.row)">通过</el-button>
                <el-button type="primary" icon="el-icon-share" @click="reason(scope.row)">驳回</el-button>
            </template>
        </el-table-column>
    </el-table><!--详细信息弹出层-->
    <el-dialog
            title="详细信息"
            :visible.sync="detaileVisiable"
            width="30%">
        <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
            <el-form-item label="商家头像" >
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false">
                    <img v-if="ruleForm.bicon" :src="ruleForm.bicon" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="营业执照" >
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false">
                    <img v-if="ruleForm.license" :src="ruleForm.license" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="身份证正面" >
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false">
                    <img v-if="ruleForm.cardfront" :src="ruleForm.cardfront" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="身份证反面" >
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false">
                    <img v-if="ruleForm.cardreverse" :src="ruleForm.cardreverse" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="detaileVisiable = false">关闭</el-button>
  </span>
    </el-dialog>
<!--    驳回弹出层-->
    <el-dialog
            title="驳回理由"
            :visible.sync="reasonVisiable"
            width="30%">
        <el-form :model="reasonForm" status-icon label-width="100px" class="demo-ruleForm">
            <el-form-item label="驳回理由">
                <el-input v-model="reasonForm.reasonMsg"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="reasonVisiable = false">关闭</el-button>
    <el-button @click="configReason">确定</el-button>
  </span>
    </el-dialog>
    <!--        分页插件-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync=this.SearchForm.currentPage
            :page-sizes="pageSizes"
            :page-size=this.SearchForm.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
</template>

<script>
    export default {
        name: "businessAudit",
        data(){
            return{
                tableData:[],
                SearchForm:{
                    //当前页码
                    currentPage: 1,
                    //每也显示的个数
                    pageSize: 3,
                    bname:"",
                    sname:"",
                    address:"",
                    auditstatr:"",
                    beginTime:"",
                    endTime:"",
                },
                pageSizes:[1,3,5,7],
                //总条数
                total:0,
                //当前页码
                currentPage: 1,
                //每也显示的个数
                pageSize: 3,
                detaileVisiable:false,
                ruleForm:{},
                reasonVisiable:false,
                reasonForm:{}
            }
        },
        created() {
            this.initTable();
        },
        methods:{
            initTable(){
              this.$http.post("/system/tbBusiness/findAuditMsg",this.SearchForm).then(result=>{
                  this.tableData = result.data.data.records
                  this.total = result.data.data.total;
              })
            },
            detailedMsg(id){
                this.detaileVisiable = true
                this.$http.post("/system/tbBusiness/auditDetailedMsg/"+id).then(result=>{
                    console.log(result)
                    this.ruleForm = result.data.data;
                    console.log(this.ruleForm)
                })
            },
            //通过审核
            succes(row){
                if(row.audtstate==1) {
                    this.$message.success("已经审核过喽，不能重复审核")
                }else {
                    this.$http.post("/system/tbBusiness/passAudit",row).then(result => {
                        console.log(result)
                        this.$message.success("审核成功")
                        this.initTable()
                    })
                }
            },
            //审核驳回
            reason(row){
                if(row.audtstate==1){
                    this.$message.success("已经审核过喽，不能重复审核")
                }else {
                    this.reasonForm = row;
                    this.reasonVisiable = true;
                }
            },
            //确认驳回
            configReason(){
                 this.$http.post("/system/tbBusiness/turnAudit",this.reasonForm).then(result=>{
                     console.log(this.reasonForm)
                     console.log(result)
                     this.$message.success("驳回成功")
                     this.reasonVisiable = false
                     this.initTable()
                 })
            },
            //分页相关函数
            handleSizeChange(val) {
                this.SearchForm.pageSize = val
                this.initTable();
            },
            handleCurrentChange(val) {
                this.SearchForm.currentPage = val
                this.initTable()
            },
        }
    }
</script>

<style scoped>

</style>